<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title>注册页面</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        h1 {
            padding-top: 50px;
            padding-bottom: 5px;
            text-align: center;
            color: white;
        }

        h5 {
            font-weight: normal;
            text-align: center;
            padding-bottom: 20px;
            color: white;
        }

        body {
            background-image: url("");
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #7fb0f2;
        }

        .el-card {
            width: 480px;
            border-radius: 10px;
            margin: 10px auto;
        }

        a{
            text-decoration-line: none;
            color: gray;
        }

        a:hover{
            color: rgba(221,221,221,0.85);
            font-size: 80%;
        }

    </style>
</head>
<body>
<h1>注册页面</h1>
<h5>您好,欢迎您的入驻</h5>
<div id="app">
    <div>
        <el-card>
            <el-form :model="user" :rules="rules" ref="user" label-width="100px">
                <el-form-item label="账号:" prop="username">
                    <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="email">
                    <el-input type="text" v-model="user.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input type="text" v-model="user.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="用户类型:" prop="type">
                    <el-radio-group v-model="user.type">
                        <el-radio v-for="item in usertype" :label="item.label" :key="item.value"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <!--个体用户表单-->
                <el-form-item label="手机号:" v-show="user.type==='个人用户'" prop="cellPhone">
                    <el-input type="text" v-model="user.cellPhone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="姓名:" v-if="user.type==='个人用户'" prop="personName">
                    <el-input type="text" v-model="user.personName" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="职业:" v-if="user.type==='个人用户'" prop="job">
                    <template>
                        <el-select v-model="user.job" placeholder="请选择职业">
                            <!--label设置显示的内容  value设置选中后得到的内容-->
                            <el-option
                                    v-for="item in Job"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <!--企业客户表单-->
                <el-form-item label="企业名称:" v-if="user.type==='企业用户'" prop="companyName">
                    <el-input type="text" v-model="user.companyName" placeholder="请输入企业名称"></el-input>
                </el-form-item>
                <el-form-item label="企业编号:" v-if="user.type==='企业用户'" prop="companyId">
                    <el-input type="text" v-model="user.companyId" placeholder="请输入企业编号"></el-input>
                </el-form-item>
                <el-form-item label="企业类型:" v-if="user.type==='企业用户'" prop="companyType">
                    <template>
                        <el-select v-model="user.companyType" placeholder="请选择企业涉及行业类型">
                            <!--label设置显示的内容  value设置选中后得到的内容-->
                            <el-option
                                    v-for="item in cT"
                                    :label="item.label"
                                    :value="item.value"
                                    :key="item.key">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item>
                    <el-row gutter="10">
                        <el-col span="12">
                            <el-button type="primary" @click="submitForm('user')">注册</el-button>
                        </el-col>
                        <el-col span="12">
                            <el-button @click="resetForm('user')">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <span style="float: right;padding-bottom: 10px;font-size: 50%">已有账号？<a href="login.html">点击登录</a></span>
        </el-card>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    var username = document.getElementById("")
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                /*验证码*/
                checkNumber:'',

                /*用户信息*/
                user: {
                    username: '',
                    email: '',
                    password: '',
                    cellPhone: '',
                    personName: '',
                    job: '',
                    type:'',
                    companyName:'',
                    companyType:'',
                    companyId:'',
                    key:''
                },

                /*类型选择*/
                usertype: [
                    {label: "个人用户", value: 1},
                    {label: "企业用户", value: 2}
                ],

                /*职业选择*/
                Job: [{
                    value: 'architect',
                    label: '建筑师'
                }, {
                    value: 'salesman',
                    label: '销售'
                }, {
                    value: 'doctor',
                    label: '医生'
                }, {
                    value: 'student',
                    label: '学生'
                }, {
                    value: 'accountant',
                    label: '会计师'
                }, {
                    value: 'manager',
                    label: '经理'
                }, {
                    value: 'lawyer',
                    label: '律师'
                }, {
                    value: 'individomy',
                    label: '个体经济'
                }, {
                    value: 'enterector',
                    label: '企业主管'
                }, {
                    value: 'scriptwriter',
                    label: '编剧'
                }, {
                    value: 'cartoonist',
                    label: '漫画家'
                }, {
                    value: 'designer',
                    label: '设计师'
                }, {
                    value: 'teacher',
                    label: '教师'
                }, {
                    value: 'baker',
                    label: '烘培师'
                }, {
                    value: 'electricWorker',
                    label: '电子工'
                }, {
                    value: 'mechanic',
                    label: '机械工'
                }, {
                    value: 'logisWorker',
                    label: '物流工'
                }, {
                    value: 'tradeWorker',
                    label: '贸易工'
                }, {
                    value: 'productionPlanner',
                    label: '生产规划员'
                },],

                /*企业涉及行业选择*/
                cT: [{
                    value: 'restaurant',
                    label: '餐饮宾馆',
                    key:1
                }, {
                    value: 'sport',
                    label: '体育用品',
                    key:2
                }, {
                    value: 'mechanical',
                    label: '机械机电',
                    key:3
                }, {
                    value: 'itemRecycle',
                    label: '物品回收',
                    key:4
                }, {
                    value: 'clothTextile',
                    label: '服装纺织',
                    key:5
                }, {
                    value: 'dailySundries',
                    label: '日用杂品',
                    key:6
                }, {
                    value: 'ITindustry',
                    label: '信息产业',
                    key:7
                }, {
                    value: 'logistics',
                    label: '物流',
                    key:8
                }, {
                    value: 'lightFood',
                    label: '轻工食品',
                    key:9
                }, {
                    value: 'transportation',
                    label: '交通运输',
                    key:10
                }, {
                    value: 'pets',
                    label: '宠物',
                    key:11
                }, {
                    value: 'financialTrade',
                    label: '金融贸易',
                    key:12
                }, {
                    value: 'afahf',
                    label: '农林牧渔',
                    key:13
                }, {
                    value: 'medicalScience',
                    label: '医药卫生',
                    key:14
                }, {
                    value: 'buildMaterial',
                    label: '建筑建材',
                    key:15
                }, {
                    value: 'metalMiner',
                    label: '冶金矿产',
                    key:16
                }, {
                    value: 'petrodustry',
                    label: '石油化工',
                    key:17
                }, {
                    value: 'proServices',
                    label: '专业服务',
                    key:18
                }, {
                    value: 'safeProtect',
                    label: '安全防护',
                    key:19
                }, {
                    value: 'environGreen',
                    label: '环保绿化',
                    key:20
                }, {
                    value: 'tourismLeisure',
                    label: '旅游休闲',
                    key:21
                }, {
                    value: 'officeSupply',
                    label: '办公文教',
                    key:22
                }, {
                    value: 'electric',
                    label: '电子电工',
                    key:23
                }, {
                    value: 'toysGift',
                    label: '玩具礼品',
                    key:24
                }, {
                    value: 'housewear',
                    label: '家居用品',
                    key:25
                }, {
                    value: 'specialMaterials',
                    label: '物资专材',
                    key:26
                }, {
                    value: 'packagingSupplies',
                    label: '包装用品',
                    key:27
                }, {
                    value: 'officeFurniture',
                    label: '办公家具',
                    key:28
                }],

                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' },
                        {pattern:/^[a-zA-Z0-9]+$/,message:'请输入英文加数字的组合',trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写账号密码', trigger: 'change' },
                        {pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
                        message: '6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种',trigger: 'blur'
                        }
                    ],
                    email: [
                        { required: true, message: '请填写邮箱地址', trigger: 'blur' },
                        {pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/, message: '请输入正确格式的邮箱', trigger:'blur'}
                    ],
                    cellPhone: [
                        { required: true, message: '请填写手机号', trigger: 'blur' },
                        { pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '请输入正确格式的手机号' ,trigger:'blur' }
                    ],
                    personName: [
                        { required: true, message: '请填写姓名', trigger: 'blur' },
                        {pattern:/^([A-Za-z]+$)|([\u0391-\uFFE5A-Za-z]+$)/, message: '请输入中文或英文姓名' ,trigger: 'blur'}
                    ],
                    job: [
                        { required: true, message: '请选择用户职业', trigger: 'change' }
                    ],
                    companyName: [
                        { required: true, message: '请填写企业名称', trigger: 'blur' },
                        {pattern:/^([A-Za-z]+$)|([\u0391-\uFFE5A-Za-z]+$)/, message: '请输入中文或英文企业名称', trigger: 'blur'}
                    ],
                    companyId: [
                        { required: true, message: '请填填写企业ID', trigger: 'blur' },
                        {pattern:/^[a-zA-Z0-9]+$/,message: '请输入正确格式的企业编号',trigger: 'blur'}
                    ],
                    companyType: [
                        { required: true, message: '请选择企业类型', trigger: 'change' }
                    ],
                    type: [
                        { required: true, message: '请选择用户类型', trigger: 'change' }
                    ],
                }

            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</html>